@import "highlight";
@import "tag";
@import "index";

html,
body,
#app {
  height: 100%;
}

.start {
  position: fixed;
  background: #FFF;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  animation: clsoe .6s ease-in 4s;
  animation-fill-mode: forwards;

  .logo-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.2);
    margin-top: -60px;
    animation: blur .6s ease-in 4s;
    animation-fill-mode: forwards;

    p {
      color: #666;
      margin-top: 10px;
      opacity: 0;
      animation: subText .8s ease-in 1.2s;
      animation-fill-mode: forwards;
    }
  }

  .logo-img {

    &::after {
      opacity: 0;
      animation: textShow .4s ease-in .6s;
      animation-fill-mode: forwards;
    }

    span {
      animation: sun 1s linear 0.6s infinite;

      i:nth-of-type(1) {
        animation: show 0.2s*1 linear 0.05s * 1;
        animation-fill-mode: forwards;
      }

      i:nth-of-type(2) {
        animation: show 0.2s*2 linear 0.05s * 2;
        animation-fill-mode: forwards;
      }

      i:nth-of-type(3) {
        animation: show 0.2s*3 linear 0.05s * 3;
        animation-fill-mode: forwards;
      }

      i:nth-of-type(4) {
        animation: show 0.2s*4 linear 0.05s * 4;
        animation-fill-mode: forwards;
      }

      i {
        opacity: 0;
      }
    }
  }

  @keyframes show {
    from {
      opacity: 0;
      filter: blur(10px)
    }

    to {
      opacity: 1;
      filter: blur(0)
    }
  }

  @keyframes clsoe {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }

  @keyframes textShow {
    0% {
      opacity: 0;
      filter: blur(4px);
      transform: translateX(-30%)
    }

    85% {
      opacity: 1;
      filter: blur(0);
      transform: translateX(3%)
    }

    95% {
      opacity: 1;
      filter: blur(0);
      transform: translateX(-2%)
    }

    100% {
      opacity: 1;
      filter: blur(0);
      transform: translateX(0)
    }
  }

  @keyframes subText {
    0% {
      opacity: 0;
      transform: translateY(20%);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes sun {
    0% {
      transform: rotate(0);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes blur {
    0% {
      filter: blur(0);
    }

    100% {
      filter: blur(100px);
    }
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.logo-img {
  position: relative;
  width: 130px;

  &::after {
    content: "Relax";
    position: absolute;
    left: 40px;
    top: 0;
    line-height: 36px;
    font-size: 36px;
    color: #333;
  }

  span {
    width: 36px;
    height: 36px;
    display: block;
    position: relative;
  }

  i:nth-of-type(1) {
    position: absolute;
    display: block;
    width: 13px;
    height: 18px;
    left: 18px;
    top: 0;
    background: url('../assets/01.png');
    background-size: 100% 100%;
  }

  i:nth-of-type(2) {
    position: absolute;
    display: block;
    width: 18px;
    height: 13px;
    right: 0;
    top: 18px;
    background: url('../assets/02.png');
    background-size: 100% 100%;

  }

  i:nth-of-type(3) {
    position: absolute;
    display: block;
    width: 13px;
    height: 18px;
    left: 6px;
    bottom: 0px;
    background: url('../assets/03.png');
    background-size: 100% 100%;

  }

  i:nth-of-type(4) {
    position: absolute;
    display: block;
    width: 18px;
    height: 13px;
    left: 0;
    top: 6px;
    background: url('../assets/04.png');
    background-size: 100% 100%;

  }

}

.wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  background-color: #f3f6f8;
}

.sidebar-menu {
  height: 100%;
  overflow: auto;
  background: #FFF;
}

.content-page {
  min-height: 100%;
  flex: 1;
  overflow: auto;
  padding: 35px;
}

.card-box {
  padding: 20px;
  border-radius: 3px;
  margin-bottom: 30px;
  background-color: #ffffff;
}

.m-t-sm {
  margin-top: 10px;
}

h1 {
  line-height: 43px;
  font-size: 36px;
}

h2 {
  line-height: 35px;
  font-size: 30px;
}

h3 {
  line-height: 30px;
  font-size: 24px;
}

h4 {
  line-height: 22px;
  font-size: 18px;
}

h5 {
  font-size: 15px;
}

h6 {
  font-size: 12px;
}

.logo {
  width: 190px;
  height: 70px;
  background-color: #FFF;
  display: flex;
  align-items: center;
  justify-content: left;
  border-radius: 10px;
  margin: 20px auto;
}

.topbar {
  margin-bottom: 30px;
}

.page-title {
  font-size: 18px;
  margin-bottom: 6px;
}

.page-title-decs {
  font-size: 12px;
  color: #98a6ad;
}


.icon-list {
  display: flex;
  flex-wrap: wrap;

  &>div {
    text-align: center;
    list-style: none;
    cursor: pointer;
    height: 100px;
    color: #555;
    -webkit-transition: color .3s ease-in-out, background-color .3s ease-in-out;
    transition: color .3s ease-in-out, background-color .3s ease-in-out;
    position: relative;
    margin: 3px 0;
    border-radius: 4px;
    background-color: #fff;
    overflow: hidden;
    padding: 10px 0 0;

    i[class^=x-icon-] {
      border-radius: 100%;
      font-size: 24px;
      margin: 12px 0 16px;
      -webkit-transition: -webkit-transform .3s ease-in-out;
      transition: -webkit-transform .3s ease-in-out;
      transition: transform .3s ease-in-out;
      transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
      will-change: transform;
    }

    .icon-class {
      color: #888;
      display: block;
      text-align: center;
      -webkit-transform: scale(.83);
      -ms-transform: scale(.83);
      transform: scale(.83);
      font-family: Lucida Console, Consolas;
      white-space: nowrap;
    }

    .icon-copy {
      opacity: 0;
      position: relative;
      z-index: -1;
    }
  }
}

.components-button-demo .x-btn {
  margin-right: 8px;
  margin-bottom: 12px;
}

.components-badge-demo .x-badge{
  margin-right: 30px;
  margin-bottom: 12px;
}

.components-select-demo .x-select {
  margin-right: 8px;
  margin-bottom: 12px;
}

.components-switch-demo .x-switch {
  margin-right: 8px;
  margin-bottom: 12px;
}

.components-grid-demo {

  margin-bottom: 30px;

  [class^=x-row] {
    background-color: #FFF;
    background-image: linear-gradient(90deg, #ededed 4.16666667%, transparent 0, transparent 8.33333333%, #ededed 0, #ededed 12.5%, transparent 0, transparent 16.66666667%, #ededed 0, #ededed 20.83333333%, transparent 0, transparent 25%, #ededed 0, #ededed 29.16666667%, transparent 0, transparent 33.33333333%, #ededed 0, #ededed 37.5%, transparent 0, transparent 41.66666667%, #ededed 0, #ededed 45.83333333%, transparent 0, transparent 50%, #ededed 0, #ededed 54.16666667%, transparent 0, transparent 58.33333333%, #ededed 0, #ededed 62.5%, transparent 0, transparent 66.66666667%, #ededed 0, #ededed 70.83333333%, transparent 0, transparent 75%, #ededed 0, #ededed 79.16666667%, transparent 0, transparent 83.33333333%, #ededed 0, #ededed 87.5%, transparent 0, transparent 91.66666667%, #ededed 0, #ededed 95.83333333%, transparent 0);
    margin-bottom: 5px;
  }

  [class*=x-col] {
    color: #fff;
    padding: 20px 0;
    text-align: center;
    font-size: 16px;
  }

  .blue1 {
    background: fade(#4eb7eb, 90%);
  }

  .blue2 {
    background: fade(#4eb7eb, 70%);
  }

  .blue3 {
    background: fade(#4eb7eb, 50%);
  }
}

.x-row-style {
  .x-row {
    margin-bottom: 10px;

    &>div {
      color: #fff;
      padding: 3px 0;
      text-align: center;
      font-size: 12px;

      &:nth-child(odd) {
        background: fade(#4eb7eb, 90%);
      }

      &:nth-child(even) {
        background: fade(#4eb7eb, 70%);
      }
    }
  }

  &.code-row-bg {
    .x-row {
      background-color: #efefef;
    }
  }

  &.gutter {
    .x-row {
      &>div {
        background: transparent !important;

        &:nth-child(odd) {
          div {
            background: fade(#4eb7eb, 90%);
          }
        }

        &:nth-child(even) {
          div {
            background: fade(#4eb7eb, 70%);
          }
        }
      }
    }
  }
}

.relax-document {
  .document-title {
    font-size: 16px;
    margin-bottom: 6px;
    color: #666;
    margin-bottom: 20px;

    h4 {
      font-weight: normal;
    }
  }

  table {
    width: 100%;
    border-collapse: collapse;

    &.document-api {
      margin-bottom: 20px;
    }

    thead {
      th {
        background-color: #e5eaee;
        padding: 10px;
        color: #666;
        border-bottom: 2px solid #dae1e6
      }
    }

    td {
      padding: 10px;
      background: #FFF;
      border-bottom: 1px solid #e5eaee;


      &:nth-child(3) {
        color: #f81d22;
        width: 15%;
      }

      &:nth-child(1) {
        color: #0b8235;
        width: 15%;
      }

      &:nth-child(4) {
        color: #008dff
      }
    }
  }
}